<template>
	<view class="container">
		<view class="list-data">
		<!-- 提交信息 -->
		<uni-list class="mb-10">
			<uni-list-item title="工单类型" :rightText="order.orderTypeShow" />
			<uni-list-item title="工单编号" :rightText="order.orderCode" />
			<uni-list-item title="工单状态" :rightText="order.orderStatusShow" />
			<uni-list-item title="预约时间" :rightText="order.bookingTime" />
			<uni-list-item title="提交人" :rightText="order.createBy" />
			<uni-list-item title="提交时间" :rightText="order.createTime" />
			<uni-list-item title="联系电话"  clickable @click="onClickPhone(order.submitPhone)">
				<template v-slot:footer>
					<view class="footer" style="color:blue;text-decoration:underline;">{{order.submitPhone || ''}}</view>
					
				</template>
			</uni-list-item>

			<!-- 描述溢出，改为插槽方式显示 -->
			<uni-list-item title="内容描述" >
								<template v-slot:footer>
									<view class="footer">{{order.orderDesc || ''}}</view>
									
								</template>
			</uni-list-item>
			<uni-list-item title="维修地点" >
								<template v-slot:footer>
									<view class="footer">{{order.location || ''}}</view>
									
								</template>
			</uni-list-item>
			
		</uni-list>

		<!-- 接单、完成信息 -->
		<uni-list class="mb-10" v-if="order.orderStatus === '5' || order.orderStatus === '6'
				|| order.orderStatus === '7' || order.orderStatus === '8' ">
			<uni-list-item title="接单人" :rightText="order.receiveByName" />
			<uni-list-item title="接单时间" :rightText="order.receiveTime" />
			<uni-list-item title="联系电话"  clickable @click="onClickPhone(order.receivePhone)">
				<template v-slot:footer>
					<view class="footer" style="color:blue;text-decoration:underline;">{{order.receivePhone || ''}}</view>
					
				</template>
			</uni-list-item>
			<uni-list-item v-if="order.orderStatus === '7' || order.orderStatus === '8'" title="完成时间" :rightText="order.completeTime" />
		</uni-list>

		<!-- 取消信息 -->
		<uni-list class="mb-10" v-if="order.orderStatus === '4' || order.orderStatus === '6' ">
			<uni-list-item title="取消时间" :rightText="order.cancelTime" />
			<uni-list-item title="取消原因" :rightText="order.cancelReasonShow" />
		</uni-list>

		<!-- 评价信息 -->
		<uni-list class="mb-10" v-if="order.orderStatus === '8' " >
			<uni-list-item>
			<template v-slot:header>
									<view class="slot-box">
										<view class="slot-image" style="display: block;" >评价</view>
									</view>
								</template>
								<template v-slot:body>
									<view class="slot-image" ></view>
								</template>
								<template v-slot:footer>
									<view class="slot-image" ><uni-rate v-model="rateValue"  :readonly="true"/></view>
								</template>
			</uni-list-item>
			<uni-list-item title="描述" :rightText="order.evaluateContent" />
			
		</uni-list>
		</view>
		<view>
			<!-- paddingTop:500rpx" -->
			<!-- <view style="paddingTop:500px;position: relative;display: flex;"></view> -->
			<view class="uni-fixed-bottom" >
				<view class="button-single" v-if="checkRole(['opt']) && order.orderStatus === '2' ">
					<button type="primary" class="mini-btn" size="default" @click="receive">接单</button>
				</view>
				<view class="button-single" v-if="checkRole(['user', 'admin']) && (order.orderStatus === '1' 
						|| order.orderStatus === '2' || order.orderStatus === '3' || order.orderStatus === '5' ) ">
					<button type="warn" class="mini-btn" size="default" @click="cancel">取消</button>
				</view>
				<view class="button-single" v-if="checkRole(['user']) && order.orderStatus === '7' ">
					<button type="primary" class="mini-btn" size="default" @click="evaluate">评价</button>
				</view>
				<view class="button-single" v-if="checkRole(['opt', 'admin']) && order.orderStatus === '5' && order.receiveBy === username">
					<button type="warn" class="mini-btn" size="default" @click="revoke">撤销</button>
				</view>
				<view class="button-single" v-if="checkRole(['opt', 'admin']) && order.orderStatus === '5' && order.receiveBy === username">
					<button type="primary" class="mini-btn" size="default" @click="finish">确认完成</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getOrder, receiveOrder, cancelOrder, finishOrder, revokeOrder } from '@/api/business/order';

export default {
	// components: {},
	data() {
		return {
			username: this.$store.state.user.name,
			option: {},
			order: {},
			rateValue: 0
		};
	},
	onLoad(option) {
		console.log('username', this.username)
		this.option = option
	},
	onShow() {
		this.handleGetOrder()
	},
	methods: {
		onClickPhone(phone){
			uni.makePhoneCall({
				phoneNumber: phone //仅为示例
			});
		},
		/** 修改按钮操作 */
		handleGetOrder() {
			getOrder(this.option.id).then(response => {
				// console.log('response', response)
				if(response.code === 200){
					this.order = response.data;
					this.rateValue = parseInt(this.order.evaluateScore)
				}
			});
		},

		// 接单
		receive() {
			this.showOrderConfirm('确认接单?', '确认接单' ,'我再想想').then(res => {
			  if (res.confirm) {
			    // console.log('用户点击接单');
				// console.log('order', this.order);
			    receiveOrder(this.order).then(res => {
			    	// console.log('接单返回结果', res)
			    	uni.showToast({
			    		title: '接单成功'
			    	});
			    	setTimeout(() => {
			    		uni.hideToast();
			    		//关闭提示后跳转
			    		//'/pages/work/index'
						this.handleGetOrder();
			    		// this.$tab.navigateBack();
			    		// this.$tab.redirectTo('/pages/login/');
			    	}, 1000);
			    })
			  }
			})
		},
		// 取消工单
		cancel(e) {
			this.showOrderConfirm('确认取消工单?', '确认取消' ,'我再想想').then(res => {
				if (res.confirm) {
					// console.log('用户点击取消');
					// console.log('order', this.order);
					cancelOrder(this.order).then(res => {
						// console.log('取消工单返回结果', res)
						uni.showToast({
							title: '取消成功'
						});
						setTimeout(() => {
							uni.hideToast();
							//关闭提示后跳转
							//'/pages/work/index'
							// this.$tab.navigateBack();
							this.handleGetOrder();
						}, 1000);
					})
				}
			})
		},
		// 完成工单
		finish(e) {
			this.showOrderConfirm('确认完成工单?', '确认完成' ,'我再想想').then(res => {
				if (res.confirm) {
					// console.log('用户点击完成');
					// console.log('order', this.order);
					finishOrder(this.order).then(res => {
						// console.log('完成工单返回结果', res)
						uni.showToast({
							title: '完成工单'
						});
						setTimeout(() => {
							uni.hideToast();
							//关闭提示后跳转
							//'/pages/work/index'
							// this.$tab.navigateBack();
							this.handleGetOrder();
						}, 1000);
					})
				}
			})
		},
		// 撤销工单
		revoke(e) {
			this.showOrderConfirm('确认撤销?撤销后将重新开放抢单', '确认撤销' ,'我再想想').then(res => {
				if (res.confirm) {
					// console.log('用户点击取消');
					// console.log('order', this.order);
					revokeOrder(this.order).then(res => {
						// console.log('取消工单返回结果', res)
						uni.showToast({
							title: '撤销成功'
						});
						setTimeout(() => {
							uni.hideToast();
							//关闭提示后跳转
							//'/pages/work/index'
							// this.$tab.navigateBack();
							this.handleGetOrder();
						}, 1000);
					})
				}
			})
		},
		// 跳转评价页面
		evaluate() {
			this.$tab.navigateTo('/pages/work/evaluate/index?id=' + this.option.id);
		},
		refresh() {
		   uni.redirectTo({
		       url: '/pages/work/detail/index'
		   });
		}
		
	}
};
</script>
<style lang="scss">
.mb-10 {
	position: relative;
	display: block;
	margin-bottom: 20upx;
}
.list-data{
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	position: relative;
	padding-bottom: 150px;
}
.uni-fixed-bottom {
	background-color: #fff;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	// flex-direction: column;
	position: fixed;
	left: 0;
	right: 0;
	/* #ifdef H5 */
	left: var(--window-left);
	right: var(--window-right);
	/* #endif */
	bottom: 0;
}

.mini-btn {
	margin-top: 20rpx;
	margin-right: 10rpx;
	margin-bottom: 20rpx;
}

.button-single {
	display: inline-block;
	width: 40%;
	margin: 0 auto;
}

.content-view {
	height: 80px;
}

.rate-view{  
	display: flex;
}



.slot-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}

	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		margin-right: 80px;
		width: 40px;
		height: 30px;
		font-size: 14px;
	}

	.slot-text {
		flex: 1;
		font-size: 14px;
		color: #4cd964;
		margin-right: 10px;
	}
	
	.footer{
		color:#999;
		font-size:14px;
		text-align: right;
		width:200px;
	}
	.empty{
		display: block;
		width: 10px;
	}
</style>
